<template>
  <div v-if="selectedNode" class="node-properties">
    <div class="panel-title">节点属性</div>
    
    <el-form label-width="80px" size="small">
      <el-form-item label="节点类型">
        <el-tag>{{ getNodeLabel(selectedNode.type) }}</el-tag>
      </el-form-item>
      
      <el-form-item label="节点名称">
        <el-input v-model="nodeData.label" @change="handlePropertyChange" />
      </el-form-item>
      
      <!-- 条件节点属性 -->
      <template v-if="selectedNode.type === NODE_TYPES.CONDITION">
        <el-form-item label="条件">
          <el-input
            v-model="nodeData.properties.condition"
            type="textarea"
            :rows="3"
            placeholder="请输入条件表达式"
            @change="handlePropertyChange"
          />
        </el-form-item>
      </template>
      
      <!-- 动作节点属性 -->
      <template v-if="selectedNode.type === NODE_TYPES.ACTION">
        <el-form-item label="动作类型">
          <el-select
            v-model="nodeData.properties.action_type"
            placeholder="请选择动作类型"
            @change="handlePropertyChange"
          >
            <el-option label="Web操作" value="web" />
            <el-option label="桌面操作" value="desktop" />
            <el-option label="系统操作" value="system" />
            <el-option label="AI操作" value="ai" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="参数">
          <el-button @click="showParameterDialog = true">
            编辑参数
          </el-button>
        </el-form-item>
      </template>
      
      <!-- 延时节点属性 -->
      <template v-if="selectedNode.type === NODE_TYPES.DELAY">
        <el-form-item label="延时(秒)">
          <el-input-number
            v-model="nodeData.properties.delay_seconds"
            :min="0"
            @change="handlePropertyChange"
          />
        </el-form-item>
      </template>
      
      <!-- 子流程节点属性 -->
      <template v-if="selectedNode.type === NODE_TYPES.SUBPROCESS">
        <el-form-item label="子流程">
          <el-select
            v-model="nodeData.properties.process_id"
            placeholder="请选择子流程"
            @change="handlePropertyChange"
          >
            <el-option
              v-for="process in processes"
              :key="process.id"
              :label="process.name"
              :value="process.id"
            />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    
    <!-- 参数编辑对话框 -->
    <el-dialog
      v-model="showParameterDialog"
      title="编辑参数"
      width="600px"
    >
      <parameter-editor
        v-if="showParameterDialog"
        :value="nodeData.properties.parameters"
        @update="handleParameterUpdate"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showParameterDialog = false">取消</el-button>
          <el-button type="primary" @click="handleParameterConfirm">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { NODE_TYPES, NODE_LABELS } from './NodeTypes'
import ParameterEditor from './ParameterEditor.vue'

const props = defineProps({
  selectedNode: {
    type: Object,
    default: null
  },
  onPropertyChange: {
    type: Function,
    required: true
  }
})

const nodeData = ref({
  label: '',
  properties: {}
})

const showParameterDialog = ref(false)
const processes = ref([])
const tempParameters = ref({})

// 当选中节点变化时更新数据
watch(() => props.selectedNode, (newNode) => {
  if (newNode) {
    nodeData.value = {
      ...newNode,
      properties: { ...newNode.properties }
    }
  } else {
    nodeData.value = {
      label: '',
      properties: {}
    }
  }
}, { immediate: true })

// 获取节点类型标签
const getNodeLabel = (type) => {
  return NODE_LABELS[type] || type
}

// 处理属性变更
const handlePropertyChange = () => {
  props.onPropertyChange(nodeData.value)
}

// 处理参数更新
const handleParameterUpdate = (parameters) => {
  tempParameters.value = parameters
}

// 处理参数确认
const handleParameterConfirm = () => {
  nodeData.value.properties.parameters = { ...tempParameters.value }
  handlePropertyChange()
  showParameterDialog.value = false
}

// 加载子流程列表
const loadProcesses = async () => {
  try {
    const response = await fetch('http://localhost:8000/api/process', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (!response.ok) {
      throw new Error('获取流程列表失败')
    }
    
    const data = await response.json()
    processes.value = data
  } catch (error) {
    console.error('获取流程列表失败:', error)
  }
}

onMounted(() => {
  loadProcesses()
})
</script>

<style lang="scss" scoped>
.node-properties {
  width: 300px;
  padding: 20px;
  border-left: 1px solid #e8e8e8;
  
  .panel-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 